<template>

    <div>

        <my-table :data="list">
                <my-table-column label="编号" prop="id"></my-table-column>
                <my-table-column label="姓名" prop="name"></my-table-column>
                <my-table-column label="性别" prop="gender">
                    <template v-slot="scope">
                        {{scope.row.gender?"男":"女"}}
                    </template>
                </my-table-column>
                <my-table-column label="歌曲" prop="song"></my-table-column>
                <my-table-column label="头像" prop="avatar">
                    <template v-slot="scope">
                        <img :src="scope.row.avatar" class="avatar">
                    </template>
                </my-table-column>
        </my-table>

        <br>
        <my-table :data="list">
        <my-table-column label="编号" prop="id"></my-table-column>
        <my-table-column label="姓名" prop="name"></my-table-column>
        <my-table-column label="性别" prop="gender"></my-table-column>
        <my-table-column label="歌曲" prop="song"></my-table-column>
        <my-table-column label="头像" prop="avatar"></my-table-column>
   </my-table>
    </div>
   




</template>

<script>
import MyTable from './components/MyTable.vue'
export default {
  components: { MyTable },
    data(){
        return{
          list:[
              {id:'1001',name:'张学友',gender:1,song:"吻别",avatar:'https://img0.baidu.com/it/u=3183461236,3306379330&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800'},
              {id:'1002',name:'刘德华',gender:1,song:"冰雨",avatar:'https://img0.baidu.com/it/u=4221635718,3453847840&fm=253&fmt=auto&app=120&f=JPEG?w=1096&h=800'},
              {id:'1003',name:'房东的猫',gender:0,song:"云烟成雨",avatar:'https://img0.baidu.com/it/u=760273865,4076251048&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'}
          ]
        }
    }
}
</script>

<style>
    .avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
</style>